<template>
    <div class="skin">
        <el-button type="info" @click="changeSkin('1')">正常</el-button>
        <el-button type="warning" @click="changeSkin('light')">军工</el-button>
        <el-button type="danger" @click="changeSkin('dark')">政府</el-button>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                
            }
        },
        methods:{
                // document.getElementById('app').setAttribute('class','test')
                changeSkin(skin) {
                    if (skin === 'light') {
                        document.documentElement.style.setProperty('--primary-color', '#ffffff');
                        document.documentElement.style.setProperty('--secondary-color', '#000000');
                    } else if (skin === 'dark') {
                        document.documentElement.style.setProperty('--primary-color', '#000000');
                        document.documentElement.style.setProperty('--secondary-color', '#ffffff');
                    }
                }

        }
    }
</script>

<style lang="scss" scoped>
    .skin{
        padding:50px 20px;
        .el-button{
            margin: 0 10px;
        }
    }
</style>